<template>
  <div class="detail">
    <!-- 广告 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="banner.length != 0">
        <van-swipe-item v-for='item in banner' :key='item.id'>
          <img :src="item.img_url" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="none" v-else>暂无图片</div>
    </div>
    <!-- 额外 -->
    <div class="extra">
      <p>30天无忧退货</p>
      <p>48小时快速退款</p>
      <p>满88元免邮费</p>
    </div>
    <!-- 详情 -->
    <div class="goods-info">
      <p class="name">{{info.name}}</p>
      <p class="brief">{{info.goods_brief}}</p>
      <p class="price">￥{{info.retail_price}}</p>
    </div>
    <!-- 弹出层 -->
    <div class="section-nav">
      <van-cell class="left" is-link @click="showPopup">请选择规格数量</van-cell>
      <van-popup class="popup" v-model="show" position="bottom" :style="{ height: '220px' }">
        <div class="popup-top">
          <div class="left">
            <img :src="info.primary_pic_url" alt="">
            <div class="info">
              <div class="price">价格￥{{info.retail_price}}</div>
              <div>请选择数量</div>
            </div>
          </div>
          <van-icon class="right" size="20" name="cross" @click="cancelEvents" />
        </div>
        <div class="popup-bottom">
          <div>数量</div>
          <!-- 步进器 -->
          <van-stepper v-model="value" />
        </div>
      </van-popup>
    </div>
    <!-- 参数 -->
    <div class="param">
      <div class="title">商品参数</div>
      <div class="item" v-for='item in attribute' :key='item.id'>
        <div class="name">{{item.name}}</div>
        <div class="value">{{item.value}}</div>
      </div>
    </div>
    <!-- 介绍 -->
    <div v-html='goods_desc' class="desc"></div>
    <!-- 问题 -->
    <div class="problem">
      <div class="title">
        <div class="line"></div>
        <div class="info">常见问题</div>
        <div class="line"></div>
      </div>
      <ul class="list">
        <li class="item" v-for='item in issue' :key='item.id'>
          <div class="question-box">
            <div class="spot"></div>
            <div class="question">{{item.question}}</div>
          </div>
          <div class="answer">{{item.answer}}</div>
        </li>
      </ul>
    </div>
    <!-- 大家都在看 -->
    <div class="watching">
      <div class="title">
        <div class="line"></div>
        <div class="info">大家都在看</div>
        <div class="line"></div>
      </div>
      <div class="list">
        <router-link tag="div" :to="`/home/goods/detail?id=${item.id}`" replace class="item" v-for='item in productList' :key='item.id'>
          <img :src="item.list_pic_url" alt="">
          <div class="name">{{item.name}}</div>
          <div class="price">￥{{item.retail_price}}</div>
        </router-link>
      </div>
    </div>
    <!-- 底部购物栏 -->
    <div class="bottom-fixed">
      <div class="collect" :class=" this.collected ?'collectActive':'' " @click="collectEvents"></div>
      <router-link tag="div" to="/cart" class="goCart">
        <img src="@/assets/images/ic_menu_shoping_nor.png" alt="">
        <span>{{allnumber}}</span>
      </router-link>
      <div class="shopping" @click="shoppingPopup">立即购买</div>
      <div class="cart" @click="cartPopup">加入购物车</div>
    </div>
  </div>
</template>

<script>
import { detailaction, addcollect, addCart } from "@/api/home/goods";
export default {
  name: "detail",
  data() {
    return {
      goodsData: [], // 总数据
      banner: [], // 广告
      info: [], // 详情
      collected: "", // 收藏
      show: false, // 弹出层
      value: 1, // 步进器
      attribute: [], // 商品参数
      allnumber: 0, // 数量
      goods_desc: "", // 介绍图片
      issue: [], // 问题
      productList: [], // 大家都在看
      category_id: "",
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    // 商品详情接口
    detailaction({
      id: this.$route.query.id,
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      this.goodsData = res.data;
      this.banner = res.data.gallery;
      this.info = res.data.info;
      this.collected = res.data.collected;
      this.attribute = res.data.attribute;
      this.allnumber = res.data.allnumber;
      this.goods_desc = res.data.info.goods_desc;
      this.issue = res.data.issue;
      this.productList = res.data.productList;
      this.category_id = res.data.info.category_id;
    });
  },
  // 准备
  mounted() {},
  // 解决详情页id变而内容不变的问题 - 第二种
  // beforeRouteEnter (to, from, next) {
  //   next()
  // },
  // 监听路由跳转  解决详情页id变而内容不变的问题 - 第三种
  watch: {
    $route(to, from) {
      // 商品详情接口 to.query.id 是要跳转到的路由
      detailaction({
        id: to.query.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        this.goodsData = res.data;
        this.banner = res.data.gallery;
        this.info = res.data.info;
        this.collected = res.data.collected;
        this.attribute = res.data.attribute;
        this.allnumber = res.data.allnumber;
        this.goods_desc = res.data.info.goods_desc;
        this.issue = res.data.issue;
        this.productList = res.data.productList;
        this.category_id = res.data.info.category_id;
      });
    },
  },
  // 方法
  methods: {
    // 底部购物栏 - 收藏
    collectEvents() {
      this.collected = !this.collected;
      // 添加收藏
      addcollect({
        goodsId: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      });
    },
    // 立即购买
    shoppingPopup() {
      // 判断弹出层是否打开
      if (this.show) {
        // 跳转购买页
        this.$router.push("/home");
      } else {
        this.show = true;
      }
    },
    // 加入购物车
    cartPopup() {
      // 判断弹出层是否打开
      if (this.show) {
        // 加入购物车
        addCart({
          goodsId: this.$route.query.id,
          number: this.value,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          // 购物车总数量 = 之前的数量 + 新加入的数量
          this.allnumber = this.allnumber + this.value;
          // 轻提示
          this.$toast({
            message: "添加购物车成功",
            icon: "success",
            duration: 2000,
          });
        });
      } else {
        this.show = true;
      }
    },
    // 弹出层 - 开启
    showPopup() {
      this.show = true;
    },
    // 弹出层 - 取消
    cancelEvents() {
      this.show = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.detail {
  background-color: #f4f4f4;
  // 广告
  .banner {
    width: 100%;
    img {
      width: 100%;
    }
    .none {
      width: 100%;
      height: 377px;
      background-color: #f4f4f4;
      font-size: 25px;
      line-height: 377px;
    }
  }
  // 额外
  .extra {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #f4f4f4;
    p {
      background: url("http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png")
        0 center no-repeat;
      background-size: 5px;
      padding-left: 15px;
      color: #666;
    }
  }
  // 详情
  .goods-info {
    overflow: hidden;
    background-color: #fff;
    border-bottom: 0.8px solid #f4f4f4;
    .name {
      margin: 20px auto;
      padding: 10px;
      font-size: 20px;
    }
    .brief {
      margin: 12px auto;
      color: #999;
    }
    .price {
      font-size: 17px;
      color: #b4282d;
    }
  }
  // 底部购物栏
  .bottom-fixed {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 9999;
    background-color: #fff;
    .collect {
      width: 81px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.8px solid #f4f4f4;
      background: url("../../../../assets/images/icon_collect.png") center
        no-repeat;
      background-size: 22px 22px;
    }
    .collectActive {
      width: 81px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.8px solid #f4f4f4;
      background: url("../../../../assets/images/icon_collect_checked.png")
        center no-repeat;
      background-size: 22px 22px;
    }
    .goCart {
      width: 81px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.8px solid #f4f4f4;
      position: relative;
      img {
        width: 22px;
        height: 22px;
      }
      span {
        position: absolute;
        left: calc(55%);
        top: calc(20%);
        width: 14px;
        height: 14px;
        color: #fff;
        border-radius: 50%;
        background-color: #b4282d;
      }
    }
    .shopping {
      flex: 1;
      color: #333;
      line-height: 50px;
      border-top: 0.8px solid #f4f4f4;
      border-bottom: 0.8px solid #f4f4f4;
    }
    .cart {
      flex: 1;
      color: #fff;
      line-height: 50px;
      background-color: #b4282d;
      border: 0.8px solid #b4282d;
    }
  }
  // 弹出层
  .section-nav {
    margin-bottom: 10px;
    .left {
      font-size: 12px;
    }
    .popup {
      width: calc(100% - 30px);
      padding: 15px;
      .popup-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 17.5px;
        position: relative;
        .left {
          display: flex;
          img {
            width: 88.5px;
            height: 88.5px;
            margin-right: 15px;
          }
          .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-evenly;
            .price {
              color: #b4282d;
            }
          }
        }
        .right {
          height: 20px;
          color: #999;
        }
      }
      .popup-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        div {
          margin-bottom: 12px;
        }
      }
    }
  }
  // 参数
  .param {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
    .title {
      font-size: 20px;
      padding: 10px 0;
      text-align: left;
    }
    .item {
      display: flex;
      padding: 10px 0;
      margin: 10px;
      background-color: #f7f7f7;
      .name {
        width: 67px;
        color: #999;
        text-align: left;
      }
    }
  }
  // 介绍
  .desc {
    ::v-deep p {
      margin: 0;
      padding: 0;
    }
    ::v-deep img {
      width: 100%;
      // 去除缝隙
      vertical-align: top;
    }
  }
  // 问题
  .problem {
    background-color: #fff;
    margin-bottom: 55px;
    .title {
      padding: 17.5px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .info {
        padding: 0 12.5px;
      }
      .line {
        width: 50px;
        height: 0.5px;
        background-color: #ccc;
      }
    }
    .list {
      padding: 0 15px;
      .item {
        padding-bottom: 12.5px;
        .question-box {
          display: flex;
          .spot {
            width: 4px;
            height: 4px;
            margin-top: 5.5px;
            border-radius: 50%;
            background-color: #b4282d;
          }
          .question {
            font-size: 13px;
            color: #303030;
            padding: 0 0 7.5px 4px;
          }
        }
        .answer {
          font-size: 13px;
          color: #787878;
          padding-left: 8px;
          text-align: left;
        }
      }
    }
  }
  // 大家都在看
  .watching {
    overflow: hidden;
    .title {
      background-color: #fff;
      padding: 17.5px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .info {
        padding: 0 12.5px;
      }
      .line {
        width: 50px;
        height: 0.5px;
        background-color: #ccc;
      }
    }
    .list {
      // width: 365px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 5px 5px 55px;
      .item {
        background-color: #fff;
        width: calc(50% - 2.5px);
        padding-bottom: 5px;
        margin-bottom: 5px;
        img {
          width: 151px;
          height: 151px;
          margin: 0 auto;
        }
        .name {
          margin: 12px 0 2.5px;
          padding: 0 14.5px;
          text-align: left;
        }
        .price {
          margin: 12px 0 2.5px;
          padding: 0 14.5px;
          color: #9c3232;
          text-align: left;
        }
      }
      .item:nth-child(2n) {
        margin-left: 5px;
      }
    }
  }
}
</style>